<template>
    <div class="dashboard">
      <h1>人事薪酬系统可视化大屏</h1>
  
      <div class="salary-info">
        <div class="salary-box">
          <h2>本月已发工资</h2>
          <p>金额: {{ monthlySalary }} 万元</p>
        </div>
        <div class="salary-box">
          <h2>本季已发工资</h2>
          <p>金额: {{ quarterlySalary }} 万元</p>
        </div>
        <div class="salary-box">
          <h2>本年已发工资</h2>
          <p>金额: {{ annualSalary }} 万元</p>
        </div>
      </div>
  
      <div class="chart-container">
        <h2>各部门人员统计</h2>
        <div ref="departmentChart" style="width: 600px; height: 400px;"></div>
      </div>
  
       <div class="chart-container">
        <h2>部门人力成本约</h2>
        <div ref="costChart" style="width: 600px; height: 400px;"></div>
      </div>
  
      <div class="chart-container">
        <h2>年龄、司龄、工龄结构</h2>
        <div ref="ageChart" style="width: 600px; height: 400px;"></div>
      </div>
  
      <div class="chart-container">
        <h2>能力结构统计</h2>
        <div ref="abilityChart" style="width: 400px; height: 300px;"></div>
      </div>
  
      <div class="chart-container">
        <h2>性别统计</h2>
        <div ref="genderChart" style="width: 400px; height: 300px;"></div>
      </div>
  
      <div class="employee-count">
        <h2>人员统计</h2>
        <div v-for="(item, index) in employeeCounts" :key="index">
          <p>在职人员: {{ item }} 个人</p>
        </div>
      </div>
    </div>
</template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  import type { EChartsOption } from 'echarts';
  
  // 数据 (这里用示例数据，替换成你的实际数据)
  const monthlySalary = ref(38.00);
  const quarterlySalary = ref(138.00);
  const annualSalary = ref(688.00);
  
  const employeeCounts = ref([384, 384, 384, 384, 384, 384]);
  
  const departmentChart = ref(null);
  const costChart = ref(null);
  const ageChart = ref(null);
  const abilityChart = ref(null);
  const genderChart = ref(null);
  
  
  onMounted(() => {
    // 确保 DOM 已经挂载
    if (departmentChart.value) {
      renderDepartmentChart();
    }
    if (costChart.value) {
      renderCostChart();
    }
    if(ageChart.value){
      renderAgeChart();
    }
    if(abilityChart.value){
      renderAbilityChart();
    }
     if(genderChart.value){
      renderGenderChart();
    }
  });
  
  // 各部门人员统计 图表配置
  const renderDepartmentChart = () => {
    const chartDom = departmentChart.value as HTMLElement;
    const myChart = echarts.init(chartDom);
  
    const option: EChartsOption = {
      title: {
        text: '各部门人员统计',
      },
      tooltip: {},
      xAxis: {
        data: ['党群监察部', '科技教育中心', '表述艺术中心', '视觉艺术中心', '校区管理部', '实践教育中心', '财务部', '人力资源部', '教学管理部', '办公室'],
      },
      yAxis: {},
      series: [
        {
          name: '人数',
          type: 'bar',
          data: [10, 15, 8, 12, 20, 18, 25, 30, 16, 22], // 示例数据，替换为你的数据
        },
      ],
    };
  
    myChart.setOption(option);
  };
  
  // 部门人力成本 图表配置
  const renderCostChart = () => {
    const chartDom = costChart.value as HTMLElement;
    const myChart = echarts.init(chartDom);
  
    const option: EChartsOption = {
      title: {
        text: '部门人力成本',
      },
      tooltip: {},
      xAxis: {
        data: ['党群监察部', '科技教育中心', '表述艺术中心', '视觉艺术中心', '校区管理部', '实践教育中心', '财务部', '人力资源部', '教学管理部', '办公室'],
      },
      yAxis: {},
      series: [
        {
          name: '成本',
          type: 'bar',
          data: [35, 35, 35, 35, 35, 35, 35, 35, 35, 35], // 示例数据，替换为你的数据
        },
      ],
    };
  
    myChart.setOption(option);
  };
  
  // 年龄、司龄、工龄结构 图表配置
  const renderAgeChart = () => {
    const chartDom = ageChart.value as HTMLElement;
    const myChart = echarts.init(chartDom);
  
     const option: EChartsOption = {
      title: {
        text: '年龄、司龄、工龄结构',
      },
      tooltip: {},
      xAxis: {
        data: ['26岁以下', '26-30岁', '31-35岁', '35-40岁', '41-45岁', '46-50岁', '50岁以上'],
      },
      yAxis: {},
      series: [
        {
          name: '人数',
          type: 'bar',
          data: [100, 120, 150, 200, 180, 100, 50], // 示例数据，替换为你的数据
        },
      ],
    };
  
    myChart.setOption(option);
  };
  
  // 能力结构统计 图表配置 (饼图)
  const renderAbilityChart = () => {
    const chartDom = abilityChart.value as HTMLElement;
    const myChart = echarts.init(chartDom);
  
     const option: EChartsOption = {
      title: {
        text: '能力结构统计',
      },
      tooltip: {
        trigger: 'item',
      },
      series: [
        {
          name: '学历',
          type: 'pie',
          radius: '70%',
          data: [
            { value: 54.82, name: '本科' },
            { value: 29.82, name: '本科以上' },
            { value: 15.36, name: '本科以下' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
  
    myChart.setOption(option);
  };
  
  // 性别统计 图表配置 (饼图)
  const renderGenderChart = () => {
    const chartDom = genderChart.value as HTMLElement;
    const myChart = echarts.init(chartDom);
  
     const option: EChartsOption = {
      title: {
        text: '性别统计',
      },
      tooltip: {
        trigger: 'item',
      },
      series: [
        {
          name: '性别',
          type: 'pie',
          radius: '70%',
          data: [
            { value: 67, name: '女性职员' },
            { value: 33, name: '男性职员' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
  
    myChart.setOption(option);
  };
  
  </script>
  
  <style scoped>
  .dashboard {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  
  .salary-info {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
  }
  
  .salary-box {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
  }
  
  .chart-container {
    margin-bottom: 20px;
  }
  
  .employee-count {
    margin-top: 20px;
  }
  </style>